<template>
  <div id="container">
    <div class="login-content"></div>
    <div class="from-login">
      <div class="from-top">
        <span class="el-icon-s-shop icon-logIn"></span>
        <h1>用户登录</h1>
        <el-form
          class="demo-ruleForm  el-form-box"
          :model="loginForm"
          status-icon
          :rules="loginFormRules"
          ref="loginFormRef"
          style="margin:0 60px"
        >
          <el-form-item class="el-input" prop="username">
            <el-input
              prefix-icon="el-icon-user"
              type="text"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="resetForm(ruleForm)"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "loginRegister",
 data(){
        return {
            // 表单的数据绑定对象
            loginForm:{
                username:'admin',
                password:'123456'
            },
            // 表单的校验规则
            loginFormRules:{
                username: [
                    { required: true, message: '请输入登陆账户', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入登陆密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    },
      methods:{
        login(){
         

            //判断是否校验成功
            this.$refs.loginFormRef.validate(async valid => {
                if(!valid){
                    return
                }

                // 发送请求判断是否登陆成功 
                const {data:res} = await this.$http.post('login',this.loginForm)
                
                if(res.meta.status !== 200){
                    return this.$message.error('登陆失败');
                }

                this.$message.success('登陆成功')
                // 将用户信息保存到sessionStorage中
                sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                this.$router.push('/Main')
            })

        }
    }
};
</script>

<style lang="less" scoped>
#container {
  .login-content {
    height: 300px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background-color: rgb(64, 158, 255);
  }
  .from-login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 10px solid rgb(64, 158, 255);
    border-radius: 5px;
    .from-top {
      text-align: center;
      .icon-logIn {
        font-size: 164px;
        color: rgb(64, 158, 255);
      }
      h1 {
        color: rgb(64, 158, 255);
      }
    }
  }
}
</style>